<template>
	<view class="home">
		<!-- 轮播图 -->
		<swiper indicator-dots circular>
			<swiper-item v-for="item in swipers" :key="item.id">	<!-- 循环swipers-->
				<image :src="item.img" mode=""></image>	<!-- :和v-bind：一样 -->
			</swiper-item>
		</swiper>
	
	<!-- 导航区域 -->
	<view class="nav">
		<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
			<view :class="item.icon"></view>
			<text>{{item.title}}</text>
		</view>
		
	</view>
	
	<!-- 推荐商品 -->
	<view class="hot_goods">
		<view class="tit">
			推荐商品
		</view>
		 <goods-list :goods="goods" @goodsClick='goGoodsDetail()'></goods-list> <!-- 代替了下面注释的代码-->
<!-- 		<view class="goods_list">
			<view class="goods_item" v-for="item in goods" :key="item.id">
				<image src="item.img_url"></image>
				<view class="price">
					<text>￥{{item.sell_price}}</text>
					<text>￥{{item.market_price}}</text>
				</view>
				<view class="name">
					{{item.title}}
				</view>
			</view>
		
		</view> -->
		
	</view>
	</view>
</template>

<script>
 /*使用封装的商品列表
 */
import goodsList from '../components/goods-list/goods-list.vue'

export default {
		data() {
			return {
				swipers:[],	/*, 用于保存获取到的轮播图的数据,先设为空 */
				goods:[],	/*, 用于保存获取到的商品列表数据，先设为空 */
				navs:[{
					icon:'iconfont icon-ziyuan',
					title:'购物超市',
					path:'/pages/goods/goods'
				},{
					icon:'iconfont icon-guanyuwomen',
					title:'联系我们',
					path:'/pages/contact/contact'
				},{
					icon:'iconfont icon-tupian',
					title:'社区图片',
					path:'/pages/pics/pics'
				},{
					icon:'iconfont icon-shipin',
					title:'学习视频',
					path:'/pages/videos/videos'
				}]
			}
		},
		/* 页面加载的生命周期函数 */
		onLoad() {
			this.getSwipers()
			this.getHotGoods()
		},
		/* 注册组件 */
		
		components:{"goods-list":goodsList},
		
		methods: {
			/* 获取轮播图的数据 */
			async getSwipers(){
				/* console.log("获取轮播图数据") */
				/* 发起网络请求 */
			/* 	uni.request({
					url:'http://localhost:8082/api/getlunbo',
					success:res=>{
						console.log(res)
						if(res.data.status!==0){
							return uni.showToast({
								title:"获取数据失败！"
							})
						}
						this.swipers =res.data.message
					}
				}) */
			 const res =await this.$myRequest({
					url:'/api/getlunbo'
				})
				this.swipers =res.data.message
			},
			/* 获取热门商品的数据 */
			async getHotGoods(){
				const res=await this.$myRequest({
					url:'/api/getgoods?pageindex=1'
				})
				this.goods = res.data.message
			},
			/* 导航跳转 */
			navItemClick(URL){/* 其实url相当于上面传过来的item.path */
				uni.navigateTo({
					url:URL
				})
				
			},
			goGoodsDetail(id){
				uni.navigateTo({
					url:'../goodsDetail/goodsDetail?id='+id
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.home{
		swiper{
			width: 750rpx;
			height: 380rpx;
			image{
				height: 100%;	/* 和父元素swiper一样高 */
				width: 100%;	/* 和父元素swiper一样宽 */
			}
		}
		
		.nav{
			display: flex;
			.nav_item{
				width: 25%;
				text-align: center;
				view{
					width: 120rpx;
					height: 120rpx;
					background-color: #b50e03;
					border-radius: 60rpx;
					margin: 10rpx auto;
					line-height: 120rpx;
					color: #fff;
					font-size: 50rpx;
				}
				.icon-tupian{
					font-size: 45rpx;
				}
				text{
					font-size: 30rpx;
				}
			}
		}
		.hot_goods{
			background-color: #eee;
			margin-top: 20rpx;
			overflow: hidden;
			.tit{
				height: 100rpx;
				line-height: 100rpx;
				color:$shop-color;
				text-align: center;
				letter-spacing: 40rpx;	/* 字体之间的间距 */
				background-color: #fff;
				margin:7rpx 0;
			}
			.goods_list{
				padding: 0 15rpx;
				display: flex;
				flex-wrap: wrap;	/* 换行 */
				justify-content: space-between;	/* 有间隙 */
				.goods_item{
					background-color: #fff;
					margin: 10rpx 0;
					border-radius: 16rpx;
					width: 355rpx;
					image{
						width: 80%;
						height: 150px;
						display: block; /* 设为块级元素,就可以使用块级元素的居中方式 */
						margin: 0 auto;
					}
					.price{
							color: #b50e03;
							margin-left: 17rpx;
							font-size: 36rpx;
							text:nth-child(2){
								color: #ccc;
								font-size: 28rpx;
								margin-left: 17rpx;
								text-decoration: line-through;/* 给字符上加上一个删除线 */
							}
					}
					.name{
						margin-left: 17rpx;
						font-size: 25rpx;
						padding-bottom: 15rpx;
						padding-top: 10rpx
						
					}
					
					
				}
			}
			}
	}
	
</style>
